<template>
    <div class="box">
        <div class="login-container">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="姓名" prop="account">
                    <el-input v-model="ruleForm.account" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" />
                </el-form-item>
            </el-form>
            <el-button type="primary" style="float: right;" @click="login">登陆</el-button>
        </div>
    </div>

</template>

<script setup>
import microApp from '@micro-zoe/micro-app'
import md5 from "js-md5";
import { ref, reactive } from "vue"
import { useRouter } from "vue-router";
import { accountLogin } from "@/api/login"
const router = useRouter()
const ruleFormRef = ref()
const ruleForm = reactive({
    account: "13277081267",
    password: "a123456"
})
const login = async () => {
    const arr = {
        account: ruleForm.account,
        password: md5(ruleForm.password)
    }
    const res = await accountLogin(arr)
    const {code , message,data} =res
    console.log(code);
    if(code == '000000'){
        console.log("==");
        microApp.setGlobalData({token:data.accessToken})
        router.push({name:"childHome"})
        sessionStorage.setItem("token",data.accessToken)
    }
}
</script>

<style lang="scss" scoped>
.box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-container {
    width: 400px;
    padding: 20px;
    height: 200px;
    margin: 0 auto;
    background-color: pink;

}
</style>